<template>
  <Layout class="bg-bai">
    <Sider :style="{background: '#fff',borderRight:'1px solid #eee'}"
           :width="300">
      <Card icon="ios-options"
            :bordered="false">
        <p slot="title">日历</p>
        <!-- <a slot="extra">
          <Checkbox v-model="showTitle">显示</Checkbox>
        </a> -->

      </Card>
    </Sider>
    <Content :style="{padding:'0 10px',position:'relative'}">
      <div class="add">
        <Input search
               enter-button="添加"
               v-model.trim="title"
               @on-search="add"
               placeholder="输入任务内容" />
      </div>
      <Menu mode="horizontal"
            theme="light"
            @on-select="load"
            :active-name="activName">
        <MenuItem :name="0">
        <Icon type="ios-paper" />
        待办
        </MenuItem>
        <MenuItem :name="-1">
        <Icon type="ios-people" />
        所有
        </MenuItem>
      </Menu>
      <Table :columns="cols"
             :row-class-name="rowClassName"
             :data="items"></Table>
      <div class="addModal"
           v-show="addShow">
        <div class="head">
          任务详情
        </div>
        <div class="content">
          <Form :label-width="80"
                :model="model">
            <FormItem label="标题">
              <Input v-model="model.title"
                     placeholder="标题"></Input>
            </FormItem>
            <FormItem label="工时">
              <Row :gutter="10">
                <Col :span="2">
                <InputNumber v-model="model.hour"
                             placeholder="小时"></InputNumber>
                </Col>
                <Col :span="10">
                <label class="ivu-form-item-label"
                       style="width: 80px;">来源</label>
                <Select v-model="model.come"
                        style="width:200px">
                  <Option v-for="item in source"
                          :value="item.value"
                          :key="item.value">{{ item.label }}</Option>
                </Select>
                </Col>
                <Col :span="10">
                <label class="ivu-form-item-label"
                       style="width: 80px;">项目</label>
                <Select v-model="model.project"
                        style="width:200px">
                  <Option v-for="item in projects"
                          :value="item.value"
                          :key="item.value">{{ item.label }}</Option>
                </Select>
                </Col>
              </Row>
            </FormItem>
            <FormItem label="状态">
              <Row>
                <Col :span="8">
                <RadioGroup v-model="model.status">
                  <Radio label="0">
                    <Icon type="ios-navigate"
                          size="16" />
                    <span>待办</span>
                  </Radio>
                  <Radio label="1">
                    <Icon type="ios-pause"
                          size="16" />
                    <span>暂停</span>
                  </Radio>
                  <Radio label="99">
                    <Icon type="md-happy"
                          size="16" />
                    <span>完成</span>
                  </Radio>
                </RadioGroup>
                </Col>
                <Col :span="14">
                <label class="
                     ivu-form-item-label"
                       style="width: 80px;">级别</label>
                <RadioGroup v-model="model.level">
                  <Radio label="4">
                    <Icon type="ios-navigate"
                          size="16" />
                    <span>重要紧急</span>
                  </Radio>
                  <Radio label="3">
                    <Icon type="ios-navigate"
                          size="16" />
                    <span>重要不紧急</span>
                  </Radio>
                  <Radio label="1">
                    <Icon type="ios-pause"
                          size="16" />
                    <span>紧急不重要</span>
                  </Radio>
                  <Radio label="0">
                    <Icon type="md-happy"
                          size="16" />
                    <span>不紧急不重要</span>
                  </Radio>
                </RadioGroup>
                </Col>
              </Row>
            </FormItem>
            <FormItem label="内容">
              <Input v-model="model.content"
                     type="textarea"
                     :rows="6"
                     placeholder="详细内容" />
            </FormItem>
            <FormItem label="附件">
              <Upload multiple
                      :show-upload-list="false"
                      :on-success="handleSuccess"
                      name="files"
                      :format="['gif','jpg','png']"
                      :action="$store.state.api+'/file/upload'"
                      :max-size="2048"
                      :on-format-error="handleFormatError"
                      :on-exceeded-size="handleMaxSize"
                      :before-upload="handleBeforeUpload">
                <Button icon="ios-cloud-upload-outline">上传</Button>
              </Upload>
              <ul>
                <li class="file-li"
                    v-for="(item,i) in model.fileList"
                    :key="i">
                  <template v-if="item.status === 'finished'||!item.status">
                    <a :href="$store.state.api+item.url"
                       target="_blank">{{item.name}}</a>
                    <Icon type="ios-trash-outline"
                          size="18"
                          @click="handleDelete(i)" />
                  </template>
                  <template v-else>
                    <Progress v-if="item.showProgress"
                              :percent="item.percentage"
                              hide-info></Progress>
                  </template>
                </li>
              </ul>
            </FormItem>
          </Form>
        </div>
        <div class="footer">
          <Button type="primary"
                  @click="save()">保存</Button>
          <Button type="default"
                  @click="addShow=false">关闭</Button>
        </div>
      </div>
    </Content>
    <Modal v-model="finishModal"
           title="完成任务"
           @on-ok="asyncOK">
      <h1>{{fmodel.title}}</h1>
      <p>完成工时：<InputNumber v-model="fmodel.hour"
                     placeholder="小时"></InputNumber>
      </p>
    </Modal>
  </Layout>
</template>

<script>
export default {
  // middleware: 'auth',
  data () {
    return {
      activName: 0,
      title: '',
      addShow: false,
      finishModal: false,
      fmodel: {
        id: 0,
        hour: 0,
        title: ''
      },
      model: {},
      source: [
        { label: '自发', value: '1' },
        { label: '李喜光', value: '2' },
        { label: '党宏', value: '3' },
        { label: '李翔宇', value: '4' }
      ],
      projects: [
        { label: '学习', value: '1' },
        { label: '31所', value: '2' },
        { label: '13所', value: '3' },
        { label: '3D', value: '4' }
      ],
      cols: [
        {          title: '详情', key: 'id', width: 70, className: 'red',
          render: (h, params) => {
            return h('Icon', {
              props: {
                type: 'ios-apps',
                size: 24
              },
              class: '',
              on: {
                click: () => {
                  this.show(params.index)
                }
              }
            })
          }        },
        {          title: '操作', key: 'id', width: 60,
          render: (h, params) => {
            var opt = h('Icon', {
              props: {
                type: 'md-arrow-dropright-circle',
                size: 24
              },
              style: {
                display: params.row.status == 0 ? 'block' : 'none'
              },
              on: {
                click: () => {
                  this.finish(params.index)
                }
              }
            });
            return opt          }        },
        { title: '主题', key: 'title' },
        { title: '工时', key: 'hour', width: 80 },
        { title: '来源', key: 'come', width: 130 },
        { title: '项目', key: 'project', width: 130 },
        { title: '时间', key: 'creationTime', width: 180 },
        {          title: '删除', key: 'id', width: 60,
          render: (h, params) => {
            return h('Icon', {
              props: {
                type: 'ios-trash-outline',
                size: 24
              },
              class: 'delete',
              on: {
                click: () => {
                  this.deleteItem(params.index)
                }
              }
            }, 'Delete')
          }
        }
      ],
      items: []
    }
  },
  components: {

  },
  created () {
    this.load()
  }
  , methods: {
    load (a) {
      var where = "Status=" + a
      if (a == undefined || a == -1) {
        where = "1=1"
      }
      this.$http.get("/api/services/app/WorkItem/GetPaged", {        params: {
          FilterText: where
        }      }
      ).then(r => {
        this.items = r.result.items
      })
    },
    add (title) {
      if (title != '') {
        var action = "/api/services/app/WorkItem/Add"
        this.$http.post(action + "?title=" + title).then(r => {
          if (r.success) {
            this.$Message.success('成功')
            this.title = ''
            this.load()
          } else {
            this.$Message.error('erro')
          }
        })
      } else {
        this.$Message.info('请输入内容')
      }
    },
    save () {
      this.$http.put("/api/services/app/WorkItem/Update", this.model).then(r => {
        if (r.success) {
          this.$Message.success('成功')
          this.addShow = false
          this.model = {}
          this.load()
        } else {
          this.$Message.error('erro')
        }
      })
    },
    finish (i) {
      this.finishModal = true
      var item = this.items[i];
      this.fmodel = {
        id: item.id,
        title: item.title,
        hour: item.hour
      }
    },
    asyncOK () {
      this.$http.post("/api/services/app/WorkItem/Finish", this.fmodel).then(r => {
        if (r.success) {
          this.$Notice.success({
            title: 'ok',
            desc: '完成'
          })
          this.load()
        }
      })
    },
    show (i) {
      if (this.model.id != this.items[i].id) {
        this.$http.get("/api/services/app/WorkItem/GetById?id=" + this.items[i].id).then(r => {
          if (r.success) {
            this.model = r.result
            this.addShow = true
          } else {
            this.$Message.error("加载异常")
          }
        })
      } else {
        this.addShow = false
        this.model = {}
      }
    },
    deleteItem (i) {
      this.$Modal.confirm({
        title: '操作确认',
        content: '确认要删除吗？',
        okText: '确定',
        cancelText: '取消',
        onOk: async () => {
          this.$http.delete("/api/services/app/WorkItem/Delete?id=" + this.items[i].id).then(r => {
            if (r.success) {
              this.$Message.success({
                desc: "删除成功"
              })
              this.load()
            }
          })
        }
      })
    },
    rowClassName (row, index) {
      if (row.status === 0) {
        return 'error';
      }
      if (row.status === 1) {
        return 'warn';
      }
      if (row.status === 99) {
        return 'success';
      }
      return '';
    },
    handleSuccess (res, file) {
      file.url = res.result[0].url
      this.model.fileList.push(file)
    },
    handleDelete (i) {
      this.$Modal.confirm({
        title: '操作确认',
        content: '确认要删除吗？',
        okText: '确定',
        cancelText: '取消',
        onOk: async () => {
          this.model.fileList.splice(i, 1)
        }
      })
    },
    handleFormatError (file) {
      this.$Notice.warning({
        title: 'The file format is incorrect',
        desc: 'File format of ' + file.name + ' is incorrect, please select jpg or png.'
      });
    },
    handleMaxSize (file) {
      this.$Notice.warning({
        title: 'Exceeding file size limit',
        desc: 'File  ' + file.name + ' is too large, no more than 2M.'
      });
    },
    handleBeforeUpload () {
      const check = this.model.fileList.length < 5;
      if (!check) {
        this.$Notice.warning({
          title: 'Up to five pictures can be uploaded.'
        });
      }
      return check;
    }
  }
}
</script>

<style scoped>
.add {
  padding: 5px 0;
}
.addModal {
  position: absolute;
  top: 45px;
  bottom: 0;
  right: 0;
  left: 400px;
  z-index: 999;
  border-left: 1px solid #eee;
  background: white;
}
.addModal .head {
  background: #f7f7f7;
  position: absolute;
  top: 0;
  width: 100%;
  line-height: 40px;
  font-weight: bold;
  padding-left: 20px;
}
.addModal .content {
  top: 50px;
  bottom: 50px;
  width: 100%;
  position: absolute;
  padding-right: 10px;
}
.addModal .footer {
  width: 100%;
  position: absolute;
  bottom: 0;
  line-height: 50px;
  padding-left: 20px;
  border-top: 1px solid #eee;
  background: #f7f7f7;
  z-index: 99;
}

.bg-bai {
  background-color: white;
}
</style>
